<template>
  <el-dialog
    title="批量导入学员"
    :visible.sync="showDialog"
    width="70%"
    @close="btnCanel"
    ref="dialog-import"
  >
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="下载、导入" description="下载模板 , 导入文件"></el-step>
      <el-step
        title="预览、上传"
        description="本地预览数据 , 上传数据"
      ></el-step>
    </el-steps>

    <!-- 上传文件后显示table和提示 -->
    <!-- table -->
    <div class="show-table" v-show="showTable">
      <el-alert
        title="请核查数据是否存在，若存在可删除该条数据！"
        type="warning"
        center
        show-icon
      >
      </el-alert>
      <UploadTable ref="table" />
      <el-row>
        <el-col>
          <el-button
            style="margin-top: 12px"
            size="small"
            type="warning"
            @click="back"
            >上一步
          </el-button>

          <el-button
            style="margin-top: 12px"
            size="small"
            @click="uploadData"
            type="primary"
          >
            上传数据
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 未上传文件时显示按钮 -->
    <div class="button-rows" v-show="!showTable">
      <el-row type="flex" justify="center">
        <el-col :span="12">
          <el-button style="margin-top: 12px" size="small" type="success">
            <a href="/static/学生信息模板.xls" download="学生信息模板.xls">
              下载模板
            </a>
          </el-button>
          <p>学生信息模板.xls</p>
        </el-col>
        <el-col :span="12">
          <!-- 上传文件 -->
          <UploadExcel ref="upload" v-if="isUpload" />
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-button
            style="margin-top: 12px"
            size="small"
            type="primary"
            @click="next"
            >下一步
          </el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import UploadExcel from "./upload-excel";
import UploadTable from "./upload-table";
import { daoRu } from "@/api/student";
export default {
  name: "DialogImport",
  components: {
    UploadExcel,
    UploadTable,
  },

  data() {
    return {
      showDialog: false,
      showTable: false,
      active: 0,
      isUpload: false,
    };
  },

  methods: {
    btnCanel() {
      this.showDialog = false;
      this.showTable = false;
      this.active = 0;
      this.isUpload = false;
    },

    // 下一步
    next() {
      const fileList = this.$refs.upload.studentsInfo;
      if (fileList) {
        if (this.active++ > 2) this.active = 0;
        this.showTable = true;
        setTimeout(() => {
          this.$refs.table.tableData = fileList;
        }, 0);
      } else {
        this.$message.warning("请导入文件");
      }
    },

    // 上一步
    back() {
      if (this.active-- < 0) this.active = 2;
      this.showTable = false;
    },

    // 上传数据
    async uploadData() {
      try {
        await daoRu({
          list: this.$refs.table.tableData,
        });
        this.$message.success("导入成功");
        this.btnCanel();
        this.$emit("update");
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style scoped>
.button-rows,
.show-table {
  margin: 20px;
}

.el-col {
  text-align: center;
}
</style>
